<template>
  <div v-loading.fullscreen.lock="loading">
    <!-- 服装保养洗涤 -->
    <div style="margin-bottom: 60px;">
      <div class="info">
        <div>服装保养洗涤</div>
        <div class="info-type">
          <div @click="onType('服装保养')">服装保养</div>
          <div @click="onType('服装洗涤')">服装洗涤</div>
        </div>
      </div>
    </div>
    <div >
      <botany-curing :curingData="curingData"></botany-curing>
    </div>
    <div class="pag">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="queryParams.size"
        :current-page="queryParams.current"
        background
        layout="prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import {
  curingList,
} from "@/api/home/api";
// 女性服装
import botanyCuring from "../../../components/botanyCuring";
export default {
  components: {
    botanyCuring
  },
  data() {
    return {
      loading: false,
      queryParams: {
        size: 12,
        current: 1
      },
      total: 0,
      isTypeBak: "",
     
      curingData: []
    };
  },
  created() {
    this.getList();
  },
  methods: {
   getList() {
      this.loading=true
      let query = {
        summary: "",
        current: this.queryParams.current,
        name: "",
        size: this.queryParams.size,
        type: this.isTypeBak
      };
      curingList(query).then(res => {
        let data = res.data;
        this.total = data.total;
        
        this.curingData = data.dataList;
        this.loading=false
      });
    },
    onType(i) {
      this.isTypeBak = i;
      this.getList();
    },
    handleSizeChange(val) {
      this.queryParams.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.queryParams.current = val;
      this.getList();
    }
  }
};
</script>

<style scoped>

.pag {
  display: flex;
  justify-content: center;
}
.pag >>> .el-pager li {
  padding: 0 4px;
  font-size: 14px;
  min-width: 35px;
  height: 35px;
  line-height: 35px;
  box-sizing: border-box;
  border-radius: 4px;
}
.pag >>> .el-pagination button,
.el-pagination span:not([class*="suffix"]) {
  display: inline-block;
  font-size: 14px;
  min-width: 35px;
  height: 35px;
  line-height: 35px;
  vertical-align: top;
  box-sizing: border-box;
  border-radius: 4px;
}
.pag >>> .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #0dbd95;
  color: #fff;
}
.pag >>> .is-background .el-pager li.active {
  color: #fff;
  cursor: default;
}
.pag >>> .is-background .el-pager li:hover {
  color: #0dbd95;
}
.pag >>> .is-background .el-pager li:not(.disabled):hover {
  color: #0dbd95;
}
.pag >>> .is-background .el-pager li:not(.disabled).active:hover {
  background-color: #0dbd95;
  color: #fff;
}
</style>
 <!-- 新闻资讯 -->
<style scoped>
.info {
  display: flex;
  width: 100%;
  border-bottom: 2px solid #e7e7e7;
}
.info > div {
  margin-bottom: 15px;
}
.info > div:first-child {
  font-size: 16px;
  font-weight: bold;
}
.info-type {
  display: flex;
  margin-left: auto;
}
.info-type div {
  margin-left: 36px;
  color: #777;
  font-size: 16px;
  cursor: pointer;
}
.info-type div:hover {
  color: #0dbd95;
}
.info-for {
  margin-top: 36px;
  width: 100%;
}
.more {
  width: 100%;
  text-align: right;
  color: #707070;
  cursor: pointer;
  margin-bottom: 40px;
}
</style>